<template id="alert">
  <div class="ui-modal" role="dialog" v-el:modal>
     <div>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">{{title}}</h4>
          </div>

          <div class="modal-body" v-if="content">
            {{content}}
          </div>
          <div class="modal-footer text-center">
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="resolve">确认</button>
          </div>
        </div><!-- /.modal-content -->
      </div>
		 </div>
  </div>
</template>
<script>
  export default {
    replace: false,
//		data:()=>({
//			title:"",
//			content:""
//		}),
		props: {
			title: {
				type: String,
				default:""
			},
			content: {
				type: String,
				default:""
			}
		},
    methods: {
			  init() {
					$(this.$els.modal).modal('show');
				},
				hide() {
					$(this.$els.modal).modal('hide');
				},
				resolve() {
					 this.$dispatch("resolve");
				}
    },
		ready() {
				$(this.$els.modal).on('shown.bs.modal', function () {
  				$(this).find(".modal-footer").first().find('button:visible:first').focus();
				})
		}
  }
</script>
